<template>
	<view v-if="loaded" :id="templateId" class="container">
		<!-- 商品区域 begin -->
		<view class="goods-wrap">
			<uni-goods-col
				:key="index"
				:goods="groupData.goodsDetail"
				:routeLink="
					`/pages/common/pages/goods/goodsDetail?goodsId=${groupData.goodsDetail.goodsId}`
				"
				:goodsPrice="groupData.goodsDetail.priceStr.split('.')"
				:latePrice="groupData.goodsDetail.priceOut"
				:priceColor="themeStyles.mainColor"
				:goodsTypeText="groupData.goodsDetail.skuName"
			>
				<template slot="metaRight">
					<view class="goods-num"
						>已拼{{
							groupData.goodsDetail.successGoodsNum || 0
						}}</view
					>
				</template>
			</uni-goods-col>
		</view>
		<!-- 商品区域 end -->
		<view class="df df-c join-info">
			<view class="status-wrap">
				<!-- 倒计时区域 begin -->
				<view v-if="groupData.teamStatus === 0" class="countdown">
					<view class="countdown-prompt">
						<text class="line"></text>
						<text class="title">拼团剩余时间</text>
						<text class="line"></text>
					</view>
					<uni-countdown
						splitorColor="#666666"
						:color="themeStyles.auxiliaryColor"
						:bgColor="themeStyles.mainColor"
						:show-day="false"
						:hour="groupData.countdown.hh"
						:minute="groupData.countdown.mm"
						:second="groupData.countdown.ss"
					>
					</uni-countdown>
				</view>
				<!-- 倒计时区域 end -->

				<view class="df df-r avatar-wrap">
					<view class="avatar-list">
						<image
							v-for="(item, index) in groupData.headImageList"
							:key="index"
							:style="{
								border:
									!item.length &&
									`2rpx dashed ${themeStyles.mainColor}`
							}"
							class="avatar-item"
							:src="item"
						></image>
					</view>
				</view>
				<text class="tac already-status">
					<template v-if="groupData.teamStatus === 0">
						<template
							>还差
							<text :style="themeStyles.textAdronmentColor">{{
								groupData.shortPeople
							}}</text>
							人拼团成功！</template
						>
					</template>
					<template v-else>
						<template v-if="groupData.status === 20"
							>拼团成功！</template
						>
						<template v-else>拼团失败！</template>
					</template>
				</text>
				<view class="btn-group">
					<template v-if="groupData.teamStatus === 0">
						<template v-if="groupData.joinStatus === 0">
							<button
								@click.stop="nowJoin()"
								type="primary"
								:style="{
									background: `linear-gradient(160deg, ${themeStyles.mainColor}80, ${themeStyles.mainColor})`
								}"
								class="df df-r btn full-btn"
							>
								立即参与
							</button>
						</template>
						<template v-else>
							<button
								open-type="share"
								type="primary"
								:style="themeStyles.btnFullColor"
								class="df df-r btn full-btn "
							>
								邀请好友
							</button>
						</template>
					</template>
					<template v-else>
						<button
							@click.stop="switchTo(`/pages/tabbar/index`)"
							:style="themeStyles.btnGhostColor"
							type="primary"
							class="df df-r btn"
						>
							去逛逛吧
						</button>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/** api begon */
import { queryGroupDetail } from "@/lib/api/groupServer/group";
/** api end */

/** components begin */
import uniGoodsCol from "@/components/goods/uniGoodsCol";
import uniCountdown from "@/components/uniCountdown/uniCountdown.vue";
/** components end */
import { mapMutations } from "vuex";
export default {
	components: {
		uniGoodsCol,
		uniCountdown
	},
	data() {
		return {
			actId: "",
			countDown: {},
			groupData: {
				goodsDetail: {
					priceStr: ""    // 给默认值，防止报错
				}
			},
			statusPrompt: {
				btnTxt: "",
				desc: ""
			},
			timer: null
		};
	},

	onLoad(option) {
		console.log("option", option);
		this.joinId = option.joinId;
	},

	onShareAppMessage(res) {
		return {
			title: "我发起了商品拼团，快来一起薅羊毛",
			path: `/pages/activity/pages/group?joinId=${this.joinId}`
		};
	},

	async onShow() {
		this.removeActivityData({});
		uni.showLoading({ title: "加载中" });
		clearInterval(this.timer && this.timer);
		await this.initLoading();
		this.loaded = true;
		this.timer = setInterval(() => {
			this.initLoading();
		}, 5000);
	},

	onHide() {
		clearInterval(this.timer && this.timer);
	},

	onUnload() {
		// 清除参加活动数据
		this.saveActivityData({});
		clearInterval(this.timer && this.timer);
	},

	methods: {
		...mapMutations("activity", ["saveActivityData", "removeActivityData"]),

		async initLoading() {
			try {
				await this.getGroupDetail();
			} catch (error) {
				console.log("error", error);
				await this.$api.showToast(error.resultInfo || "加载失败");
				uni.navigateBack();
			}
		},

		nowJoin() {
			this.removeActivityData({});
			const activityData = {
				joinActivityId: this.groupData.groupTeamId
			};
			console.log("activityData", activityData);
			this.saveActivityData(activityData);
			this.navTo(
				`/pages/common/pages/goods/goodsDetail?goodsId=${this.groupData.goodsDetail.goodsId}`
			);
		},

		// 获取拼团详情
		getGroupDetail() {
			const propsData = {
				showLoading: false,
				groupTeamId: this.joinId
			};
			return queryGroupDetail(propsData).then(res => {
				res.data.goodsDetail.price = res.data.goodsDetail.priceStr.split(
					"."
				);

				this.groupData = res.data;
				const headImageList = this.groupData.headImageList;

				if (headImageList.length === 1) {
					headImageList.push("");
				}

				if (headImageList.length > 5) {
					this.groupData.headImageList = headImageList.slice(0, 5);
				}
				this.loaded = true;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import "@/pages/activity/styles/group.scss";
</style>
